import React,{ Component } from 'react'
import { connect } from 'react-redux'
import Home from '../containers/Home'
import Disk from '../containers/Disk'
import Setting from '../containers/Setting'
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect
} from 'react-router-dom'

const NoMatch = ({ location }) => (
  <div>
  <h1>404</h1>
  <Link to='/'>首页</Link>
  </div>
);

const PrivateRoute = ({component:Component,login:flag, ...rest}) => (
  <Route {...rest} render={ () =>(
    flag?(
      <Component />
    ):(
      <Redirect to='/' />
    )
  )}
/>)

class Root extends Component{
  render(){
    return(
      <Router>
        <Switch>
          <Route path='/' exact component={Home} />
          <PrivateRoute path='/disk' login={this.props.home.login} component={Disk} />
          <PrivateRoute path='/setting' login={this.props.home.login} component={Setting} />
          <Route component={NoMatch} />
        </Switch>
      </Router>
    )
  }
}


const mapStateToProps = (state) => {
  return {
    home: state.home
  }
}

export default connect(mapStateToProps)(Root)
